import React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';
import { hasToken } from './storage';

// 使用interface继承内置类型RouteProps
interface PropsType extends RouteProps {
  // 改造component的类型为React.FC 代表函数式组件
  component: React.FC;
  path: string;
}
// 修复类型问题
export type LocationStateType = {
  fromPath: string;
};
export default function AuthRoute(props: PropsType) {
  // component 需要大写开头，解构中可以重命名
  const { component: Component, path, ...restprops } = props;
  return (
    <Route
      // 使用透传将所有属性还原
      {...restprops}
      path={path}
      render={(_props: any) => {
        if (hasToken()) {
          return (
            <>
              {/* to需要动态路径 */}
              {/* <Redirect from="/login" to="/" /> */}
              <Component {..._props} />
            </>
          );
        }
        return (
          // 重定向登录时，路由传参1
          <Redirect
            to={{
              pathname: '/login',
              state: {
                fromPath: path,
              },
            }}
          />
        );
        // 重定向登录时，路由传参2
        // _props.history.puth('/login', { fromPath: path });
      }}
    />
  );
}
